<template>
	<div class="xqFooter">
		<div class="sb-top">
			<span>满30减10</span>
		</div>
		<div class="sb-db">
			<div class="sb-left">
				<span class="iconfont">
					&#xe614;
				</span>
			</div>
			<div class="sb-center">
				<span>￥0</span>
				<span>免配送费</span>
			</div>
			<div class="sb-right">
				<span>￥35起送</span>
			</div>
		</div>
	</div>
</template>

<script>
	
</script>

<style scoped lang="less">
.pxToRem(@p,@px){
    @{p}: @px / 75 * 1rem;
}
.xqFooter{
	width: 100%;
	position: fixed;
	bottom: 0;
	height: 10vh;
	z-index: 10;
	background: #fff;
	display: flex;
	flex-direction:column;
	.sb-top{
		box-sizing: border-box;
		.pxToRem(height,40);
		border-top: 1px solid #f9e8a3;
		background: #fffad6;
		text-align: center;
		.pxToRem(font-size,22);
		.pxToRem(line-height,40);
		color: #333;
	}
	.sb-db{
		flex:1;
		display: flex;
		background: #505052;
		.sb-left{
			.pxToRem(width,158);
			position: relative;
			span{
				position: absolute;
				.pxToRem(top,-30);
				left: 50%;
				transform:translate(-50%,0);
				display: inline-block;
				.pxToRem(width,80);
				.pxToRem(height,80);
				text-align: center;
				.pxToRem(line-height,80);
				background: #363636;
				border:1px solid #444;
				.pxToRem(border-width,10);
				color: #515154;
				border-radius:50%;
				.pxToRem(font-size,50);
			}
		}
		.sb-center{
			flex:1;
			display: flex;
			flex-direction:column;
			justify-content:center;
			span{
				&:nth-child(1){
					color: #fff;
					.pxToRem(font-size,28);
					font-weight: bold;
				}
				&:nth-child(2){
					color: #999;
					.pxToRem(font-size,16);
				}
			}
		}
		.sb-right{
			.pxToRem(width,210);
			display: flex;
			justify-content:center;
			align-items:center;
			span{
				color: #fff;
				font-weight:bold;
				.pxToRem(font-size,28);
			}
		}
	}
}
</style>